<template>
  <div class="container">
    <canvas 
    @click="addPoints($event)"
    @mousedown="onmousedown($event)"
    @mousemove="onmousemove($event)"
    @mouseup="onmouseup($event)"
    ref="myCanvas" 
    id="myCanvas" 
    width="600" 
    height="600"></canvas>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed, ref, inject, watch, onMounted, ComputedRef } from 'vue';
import {ISegment,ITextDatas,ICircle, createStore } from '../store/app';
import { message } from 'ant-design-vue';



export default defineComponent({
  props: {},
  setup(props) {
    const configKonva = ref({
      width: 900,
      height: 720,
    });
      const points = [] as any[];
        const radius = 5;
        const triangles =[] as any;
        let dragging = false;
        let rotating = false;
        let startAngle = 0;
        let currentAngle = 0;
        let offsetX, offsetY;
      const store = inject('store') as ReturnType<ReturnType<typeof createStore>>;
      const myCanvas = ref(null as unknown  as HTMLCanvasElement)
    
      onMounted(() => {
    
      })
      function addPoints (event){

        const ctx = myCanvas.value.getContext('2d');
        const rect = myCanvas.value.getBoundingClientRect();
            const x = event.clientX - rect.left;
            const y = event.clientY - rect.top;
            if (points.length < 3) {
                drawCircle(x, y,ctx);
                points.push({x, y});
            }
            if (points.length === 3 && !dragging && !rotating) {
              triangles.push({
                points:points,
                isFinite:true,
                dragging:false,
                rotating:false,
                index:0
              })
              
                drawTriangle(ctx);
                console.log(triangles);
                
            }
      }
      function onmousedown(event) {
            const rect = myCanvas.value.getBoundingClientRect();
            const x =event.clientX - rect.left;
            const y = event.clientY - rect.top;
            if (points.length === 3) {
                if (isInsideTriangle(x, y)) {
                    dragging = true;
                    offsetX = x;
                    offsetY = y;
                } else {
                    rotating = true;
                    // startAngle = Math.atan2(y - getCentroid().y, x - getCentroid().x) - currentAngle;
                }
            }
      }
      function onmousemove(event) {

      }
      function onmouseup(event) {

      }
      function isInsideTriangle(x, y) {
            const [A, B, C] = points;
            const areaOrig = triangleArea(A, B, C);
            const area1 = triangleArea({x, y}, B, C);
            const area2 = triangleArea(A, {x, y}, C);
            const area3 = triangleArea(A, B, {x, y});
            return Math.abs(areaOrig - (area1 + area2 + area3)) < 0.01;
        }
        function triangleArea(p1, p2, p3) {
            return Math.abs(p1.x * (p2.y - p3.y) + p2.x * (p3.y - p1.y) + p3.x * (p1.y - p2.y)) / 2;
        }
      function drawCircle(x, y,ctx) {
            ctx.beginPath();
            ctx.arc(x, y, radius, 0, Math.PI * 2, true);
            ctx.fillStyle = 'red';
            ctx.fill();
      }
        function drawTriangle(ctx) {
            ctx.clearRect(0, 0,  myCanvas.value.width,  myCanvas.value.height);
            ctx.beginPath();
            ctx.moveTo(points[0].x, points[0].y);
            ctx.lineTo(points[1].x, points[1].y);
            ctx.lineTo(points[2].x, points[2].y);
            ctx.closePath();
            ctx.fillStyle = 'red';
            ctx.fill();
        }
    return {
      myCanvas,
      addPoints,
      onmousedown,
      onmousemove,
      onmouseup
    };
  },
});
</script>

<style scoped lang="less">
[data-control='pinboard2ix'] .container {
  box-sizing: border-box;
  user-select: none;
  width: 100%;
  height: 100%;
}
canvas {
            border: 1px solid black;
        }
</style>
